<template>
	<view>
		<nav-bar>个人进展</nav-bar>
		<view class="good-li" @click="chooseGood(good.id)">
			<u-avatar :mode="mode" :size="size" :src="'http://localhost:9090/'+ListInfo.headpic" :text="text" :showLevel="showLevel" :showSex="showSex"
				:bgColor='bgColor' class="good-img"></u-avatar>
			<view class="flex-item">
				<view class="good-name">{{ListInfo.username}}({{ListInfo.email}})</view>
				<text class="good-title">{{ListInfo.sex}}</text>
			</view>
		</view>
		<u-cell-group>
			<u-cell-item center :is-link="true" title="简历" index="index" @click="click" :arrow="arrow">

			</u-cell-item>
			<u-cell-item :border-bottom="false" value="" title="来源" :value="ListInfo.title" :arrow="false">

				<u-field slot="value"></u-field>
			</u-cell-item>
			<u-cell-item :border-bottom="false" value="" title="时间" :value="ListInfo.created_at" :arrow="false">
			
				<u-field slot="value"></u-field>
			</u-cell-item>
		</u-cell-group>
		
		
		<view class="wrap">
			<u-time-line>
				<u-time-line-item nodeTop="2">
					<template v-slot:node>
						<view class="u-node" style="background: #19be6b;" v-if="ListInfo.progress_status=='已结束'">
							<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
						</view>
						<view class="u-node" v-if="ListInfo.progress_status!='已结束'">
							<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view v-if="ListInfo.complete_status!=''">
							<view class="u-order-title">{{ListInfo.complete_status}}</view>
							<!-- <view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view> -->
							<view class="u-order-time">{{ListInfo.complete_time}}</view>
						</view>
						<view v-if="ListInfo.complete_status==''">
							<view class="u-order-title">待完成</view>
							<!-- <view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view> -->
							<view class="u-order-time"></view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="2">
					<template v-slot:node>
						<view class="u-node" style="background: #19be6b;" v-if="ListInfo.progress_status=='待完成'">
							<u-icon name="account-fill" color="#fff" :size="24"></u-icon>
						</view>
						<view class="u-node" v-if="ListInfo.progress_status!='待完成'">
							<u-icon name="account-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view v-if="ListInfo.evaluate_status!=''">
							<view class="u-order-title unacive">{{ListInfo.evaluate_status}}</view>
							<!-- <view class="u-order-desc">【深圳市】快件已到达目的地，派件员为国产锦衣卫007号，电话：<text class="tel">13833882438</text>，请留意快递信息</view> -->
							<view class="u-order-time">{{ListInfo.evaluate_time}}</view>
						</view>
						<view v-if="ListInfo.evaluate_status==''">
							<view class="u-order-title unacive">待评价</view>
							<!-- <view class="u-order-desc">【深圳市】快件已到达目的地，派件员为国产锦衣卫007号，电话：<text class="tel">13833882438</text>，请留意快递信息</view> -->
							<view class="u-order-time"></view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="2">
					<template v-slot:node>
						<view class="u-node" style="background: #19be6b;" v-if="ListInfo.progress_status=='待评价'">
							<u-icon name="car-fill" color="#fff" :size="24"></u-icon>
						</view>
						<view class="u-node" v-if="ListInfo.progress_status!='待评价'">
							<u-icon name="car-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view v-if="ListInfo.perform_status!=''">
							<view class="u-order-title unacive">{{ListInfo.perform_status}}</view>
							<!-- <view class="u-order-desc">【深圳市】快递已到达 深圳固戍一部</view> -->
							<view class="u-order-time">{{ListInfo.perform_time}}</view>
						</view>
						<view v-if="ListInfo.perform_status==''">
							<view class="u-order-title unacive">待履行</view>
							<!-- <view class="u-order-desc">【深圳市】快递已到达 深圳固戍一部</view> -->
							<view class="u-order-time"></view>
						</view>
					</template>
				</u-time-line-item>
				<!-- <u-time-line-item>
					<template v-slot:content>
						<view>
							<view class="u-order-desc">【深圳市】快件已从深圳运转中心发出，正在发往深圳宝安一部</view>
							<view class="u-order-time">2019-12-06 22:30</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item>
					<template v-slot:content>
						<view>
							<view class="u-order-desc">【深圳市】快件已到达 深圳运转中心</view>
							<view class="u-order-time">2019-12-04 16:42</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item>
					<template v-slot:content>
						<view>
							<view class="u-order-desc">【郑州市】快件已从郑州运转中心出发，正在发往深圳运转中心</view>
							<view class="u-order-time">2019-12-02 12:55</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item>
					<template v-slot:content>
						<view>
							<view class="u-order-desc">【郑州市】快件已到达 郑州运转中心</view>
							<view class="u-order-time">2019-12-02 08:23</view>
						</view>
					</template>
				</u-time-line-item> -->
				<u-time-line-item nodeTop="0">
					<template v-slot:node>
						<view class="u-node" style="background: #19be6b;" v-if="ListInfo.progress_status=='待履行'">
							<u-icon name="file-text-fill" color="#fff" :size="24"></u-icon>
						</view>
						<view class="u-node" v-if="ListInfo.progress_status!='待履行'">
							<u-icon name="file-text-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title unacive">{{ListInfo.sign_status}}</view>
<!-- 							<view class="u-order-desc">您购买的商品【尚方宝剑，先斩后奏】，经由北京军区仓库发货，国内快递承运人【中南海保镖】。</view> -->
							<view class="u-order-time">{{ListInfo.sign_time}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				ListInfo:{
					username:'',
					email:'',
					headpic:'',
					sex:'',
					title:'',
					created_at:'',
					form_state:'',
					progress_status:'',
					sign_status:'',
					sign_time:'',
					perform_status:'',
					perform_time:'',
					evaluate_status:'',
					evaluate_time:'',
					complete_status:'',
					complete_time:''
				},
				span: 4,
				offset: 0,
				justify: 'start',
				//头像
				mode: 'circle',
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				text: '', // 优先级比src高
				size: 'large',
				showLevel: false,
				showSex: false,
				bgColor: '#fcbd71',
				//
				arrow: true,
				rightSlot: true,
				checked: false,
				ListID:'',
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		        this.ListID=option.id
				console.log(option.id)
				
		    },
		mounted() {
			this.$api.enterprise.getRecruiterInfo(this.ListID).then(res=>{
				console.log(res)
				if(res.data.code==200){
					this.ListInfo=res.data.data
					this.getResult('yyyy-mm-dd hh:MM');//日期格式化
				}
				
			})
		},	
		methods: {
			getResult(format) {
				this.ListInfo.created_at = this.$u.timeFormat(this.ListInfo.created_at, format);
			}

		}
	}
</script>

<style lang="scss">
	.good-li {
		display: flex;
		align-items: center;
		padding: 20upx;
		margin-left: 10upx;
		margin-top: 20upx;

		.good-img {
			width: 100upx;
			height: 100upx;
			margin-right: 20rpx;

		}

		.flex-item {
			flex: 1;

			.good-name {
				font-size: 40upx;
				line-height: 40upx;
				height: 80upx;
				margin-bottom: -34upx;
				overflow: hidden;
				font-weight: 600;
				margin-left: 16upx;
			}

			.good-price {
				font-size: 30upx;
				margin-left: 16upx;
				color: red;
			}

			.good-title {
				font-size: 24upx;
				margin-left: 16upx;
				color: gray;
				display: flex;
				margin-bottom: 10upx
			}
		}
	}
	// H5中，电脑端文档演示时，可能会导致演示块挤出边界，特别处理。
	// 真实使用环境不会产生此问题
	/* #ifdef H5 */
	.u-demo-area /deep/ .u-row {
		display: flex;
		flex-wrap: wrap;
	}
	/* #endif */
	
	.wrap {
		padding: 24rpx 24rpx 24rpx 40rpx;
	}
	
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-title.unacive {
		color: rgb(150, 150, 150);
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
	
	.tel {
		color: $u-type-primary;
	}
	
</style>
